<template>
  <div class="common-wrap">
    <QueryForm
      ref="conditionForm"
      module="bookingManagement"
      :searchBtnLoading="loading"
      v-model:searchForm="searchForm"
      v-model:search-column="searchColumn"
      @handle-search="onSearch"
    />
    <div class="common-box">
      <el-row style="height: 40px" class="con-button-rows">
        <ButtonGroup
          :disabledDelete="multipleSelection.length === 0"
          :hasPermiAdd="['oceanFreight:bookingManagement:add']"
          :hasPermiDelete="['oceanFreight:bookingManagement:delete']"
          :buttonType="['add', 'delete']"
          @add="onAdd"
          @edit="onEdit"
          @delete="onDelete"
        >
          <el-button
            :disabled="multipleSelection.length !== 1"
            v-hasPermi="['oceanFreight:bookingManagement:check']"
            icon="Check"
            :title="$t('订舱确定')"
            @click="bookingConfirmedVisible = true"
          />
          <el-dropdown placement="top-start">
            <el-button
              :disabled="multipleSelection.length === 0"
              v-hasPermi="['oceanFreight:bookingManagement:printer']"
              icon="Printer"
              :title="$t('打印')"
            />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="printOceanBooking('OceanBooking_HECNY')">{{$t('HECNY订舱托书')}}</el-dropdown-item>
                <el-dropdown-item @click="printOceanBooking('OceanBooking_RQ')">{{$t('瑞秋订舱托书')}}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </ButtonGroup>
      </el-row>
      <MyTable
        tableId="bookingManagement"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pageVo="pageVo"
        ref="commonTable"
        moduleName="bookingManagement"
        @handleSelectionChange="handleSelectionChange"
        @handle-page-change="handlePageChange"
      ></MyTable>
    </div>
    <BookingConfirmed
      v-if="bookingConfirmedVisible"
      v-model:visible="bookingConfirmedVisible"
      :curRow="multipleSelection[0]"
      @onSubmit="onSearch"
    >
    </BookingConfirmed>
  </div>
</template>

<script setup lang='tsx'>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
import * as api from "@/api/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  queryFormColumnFilters,
  hasPermi,
  fileViewing,
} from "@/utils/mUtils.js";
import BookingConfirmed from "./components/bookingConfirmed.vue";
import { useRouter } from "vue-router";
const router = useRouter();
let { t } = useI18n();

defineOptions({
  name: "BookingManagement",
});
const pageVo = reactive({
  pageSize: 50,
  total: 10,
  currentPage: 1,
  status: true,
});
const loading = ref(true);
const dataSource = ref([]);
const columns = ref([
  {
    type: "checkbox",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    title: "序号",
    type: "seq",
    width: 60,
    fixed: "left",
  },
  {
    field: "bookingNo",
    title: "订舱编号",
    slots: {
      default: ({ row }) => {
        return [
          <el-button
            type="primary"
            disabled={!hasPermi(["oceanFreight:bookingManagement:edit"])}
            link
            onClick={() => {
              onEdit(row);
            }}
          >
            {row.bookingNo || ""}
          </el-button>,
        ];
      },
    },
  },
  {
    field: "customerNameZh",
    title: "客户",
  },
  {
    field: "scheduleNo",
    title: "船期编号",
  },
  {
    field: "soNo",
    title: "SO号",
  },
  {
    field: "estimatedStuffingTime",
    title: "装柜时间",
  },
  {
    field: "month",
    title: "月",
  },
  {
    field: "week",
    title: "周",
  },
  {
    field: "lineName",
    title: "干线名称",
  },
  {
    field: "lineDetailCode",
    title: "航线代码",
  },
  {
    field: "providerName",
    title: "船公司",
  },

  {
    field: "vesselName",
    title: "船名/航次",
    formatter: ({ cellValue, row }) => {
      return `${row.vesselName}/${row.voyageNo}`;
    },
  },
  {
    field: "loadingPortName",
    title: "起运港",
  },
  {
    field: "estimatedTimeDeparture",
    title: "ETD",
  },
  {
    field: "actualTimeDeparture",
    title: "ATD",
  },
  {
    field: "dischargePortName",
    title: "卸货港",
  },
  {
    field: "deliveryPortName",
    title: "目的港",
  },
  {
    field: "estimatedTimeArrivalDelivery",
    title: "ETA",
  },
  {
    field: "actualTimeArrivalDelivery",
    title: "ATA",
  },
  {
    field: "containerNumber",
    title: "箱型/箱量",
    formatter: ({ cellValue, row }) => {
      return `${row.containerCode}*${row.containerNumber || ""}`;
    },
  },
  {
    field: "createByName",
    title: "创建人",
  },
  {
    field: "createTime",
    title: "创建时间",
  },
  {
    field: "updateByName",
    title: "更新人",
  },
  {
    field: "updateTime",
    title: "更新时间",
  },
]);
const searchForm = ref({});
const searchColumn = ref([
  {
    type: "label_input",
    label: "订舱编号",
    prop: "bookingNo",
  },
  {
    type: "label_input",
    label: "船期编号",
    prop: "scheduleNo",
  },
  {
    type: "remote_select",
    label: "干线名称",
    prop: "lineDetailId",
    params: {
      searchKey: "searchKey",
      keyValue: "id",
      name: "lineName",
      abbreviation: "code",
      showCustomizedOption: true,
      displayKey: {
        customizeLeft: "providerName",
        customizeCenter: "loadingPortName",
        customizeRight: "deliveryPortName",
      },
      queryId: true,
    },
    apiModule: api.default.common.trunkLine.queryLineDetailList,
    placeholder: "请选择干线名称",
  },
  {
    type: "remote_select",
    label: "船公司",
    prop: "providerCode",
    params: {
      searchKey: "providerNameZh",
      keyValue: "providerCode",
      name: "providerNameZh",
      showCustomizedOption: true,
      abbreviation: "providerAbbr",
      displayKey: {
        customizeLeft: "providerCode",
        customizeRight: "customizeCenter",
      },
    },
    apiModule: api.default.common.serviceProvider.list,
    placeholder: "请选择船公司",
  },
  {
    type: "label_select",
    label: "起运港",
    prop: "loadingPortCode",
    labelVal: "portCode",
    labelName: "portName",
  },
  {
    type: "label_select",
    label: "目的港",
    prop: "deliveryPortCode",
    labelVal: "portCode",
    labelName: "portName",
  },
  {
    type: "label_date_picker",
    label: "ETD区间",
    prop: "etdStart",
    dateType: "datetimerange",
  },
  {
    type: "label_input",
    label: "SO",
    prop: "soNoList",
  },
  {
    type: "label_input",
    label: "L/F",
    prop: "containerTypeName",
  },
  {
    type: "label_input",
    label: "订舱代理",
    prop: "bookingProviderCode",
  },
]);
const multipleSelection = ref([]);
const bookingConfirmedVisible = ref(false);
onMounted(() => {
  onSearch();
  portList();
});
const printOceanBooking = (val) => {
  api.default.oceanFreight.bookingManagement
    .printOceanBooking({
      idList: multipleSelection.value.map((item) => item.id),
      templateCode: val,
    })
    .then((res) => {
      fileViewing("", res.data, "pdf");
    });
};
const portList = async () => {
  const { rows } = await api.default.common.port.list({
    pageSize: 300,
  });
  queryFormColumnFilters(searchColumn.value, "loadingPortCode").options = rows;
  queryFormColumnFilters(searchColumn.value, "deliveryPortCode").options = rows;
};
const list = () => {
  loading.value = true;
  const params = {
    ...searchForm.value,
  };
  if (params?.etdStart) {
    [params.etdStart, params.etdEnd] = params.etdStart;
  }
  api.default.oceanFreight.bookingManagement
    .list({
      ...params,
      pageNum: pageVo.currentPage,
      pageSize: pageVo.pageSize,
    })
    .then((res) => {
      dataSource.value = res.rows;
      loading.value = false;
      pageVo.total = res.total;
    })
    .catch(() => {
      loading.value = false;
    });
};

const onAdd = () => {
  router.push({
    path: "/oceanFreight/booking/bookingManagementAdd",
    query: {
      title: "订舱新增",
    },
  });
};
const onEdit = (row) => {
  router.push({
    path: "/oceanFreight/booking/bookingManagementAdd",
    query: {
      title: "订舱修改",
      id: row.id,
      detailed: row.bookingNo,
    },
  });
};
const onDelete = () => {
  const ids = multipleSelection.value.map((item) => item.id);
  ElMessageBox.confirm(t("是否确定删除当前选择数据？"), t("提示"), {
    confirmButtonText: t("确定"),
    cancelButtonText: t("取消"),
    type: "warning",
  })
    .then(() => {
      api.default.oceanFreight.bookingManagement.remove(ids).then(() => {
        ElMessage.success(t("删除成功"));
        onSearch();
      });
    })
    .catch(() => {});
};
const handleSelectionChange = (list) => {
  multipleSelection.value = list;
};
const handlePageChange = (val) => {
  const { currentPage, pageSize } = val;
  pageVo.currentPage = currentPage;
  pageVo.pageSize = pageSize;
  list();
};
const onSearch = () => {
  pageVo.currentPage = 1;
  list();
};
</script>

<style lang="scss" scoped>
.pcMenu {
  height: 100%;
  width: 100%;
  background: #fff;
}
</style>